<template>
  <div class="exam-adult">
    <p class="title"><span>天赋教育</span>-定制{{type}}测试</p>
    <p class="tip">{{nianling}}</p>
    <img src="@/assets/bceshi4.png" class="tip-img" alt="">
    <div class="flex-type">
      <div class="item">
        <p class="text">{{type}}</p>
        <p class="text-tip">测试角色</p>
      </div>
      <div class="item">
        <p class="text">15<span>≤</span></p>
        <p class="text-tip">测试时间</p>
      </div>
    </div>
    <img src="@/assets/bceshi5.png" class="exam-result" alt="">
    <div class="item-info">
      <p class="item-title">测试介绍</p>
      <div class="cons" v-html="info.content">
      </div>
    </div>
    <div class="exam-fixed">
      <p class="fixed-title">￥68.85</p>
      <p class="fixed-tip">少年天赋测试（次数：{{info.testnum}}）</p>
      <span class="btn pay" @click="router({path: './examOrder', query:{article_type: article_type, price: info.price}})" v-if="info.testnum == '0'">立即购买</span>
      <span class="btn" @click="person_center" v-if="info.testnum > 0">立即测试</span>
    </div>
    <toast v-model="none_num" type="text" width="25em">今日测试次数已满，请明日再进行测试</toast>
    <confirm-box :confirmMessage="message"></confirm-box>
  </div>
</template>

<script>
import confirmBox from '@/components/confirmBox'
import { Toast, AlertModule } from 'vux'
import { examIndex, personCenter } from '@/api/api'
export default {
  components: {
    Toast,
    confirmBox
  },
  data () {
    return {
      none_num: false,
      message: {},
      type: '',
      nianling: '',
      article_type: '',
      info: {},
    }
  },
  created () {
    this.article_type = this.$route.query.type;
    if(this.$route.query.type == 1){
      this.type = '少年'
      this.nianling = '适合年龄 11~18岁少年'
    }else{
      this.type = '儿童'
      this.nianling = '适合年龄 10岁以下儿童'
    }
    this.message = {
      title: '是否继续上次未答完试题',
      tip: '您上次选择了'+this.type+'答到第'+localStorage.getItem("timu_num")+'题，是否继续上次剩下的题目',
      btn: '去开通',
      is_show: false,
      left: '重新开始',
      right: '继续',
      type: this.$route.query.type,
    }
    this.uid = sessionStorage.getItem('uid');
    this.exam_index()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    exam_index() {
      examIndex(this.uid, this.article_type).then((res) => {
        this.info = res.data.info;
        console.log(this.info)
        if(localStorage.getItem("timu_num") && this.info.testnum){
          this.message.is_show = true;
        }
      }).catch((err) => {
        console.dir(err)
      })
    },
    person_center() {
      personCenter(this.uid).then((res) => {
        if(!res.data.info.phone){
          AlertModule.show({
            title: '温馨提示',
            content: '请先绑定手机号',
            onHide: () => {
              this.router({path: './bindPhone'})
            }
          })
          return;
        }
        this.router({path: './examStart', query:{article_type: article_type, miyao: info.miyao}})
      }).catch((err) => {
        console.log(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
.exam-adult
  background-color #43a047
  min-height 100vh
  padding-bottom 8rem
  box-sizing border-box
  .title
    font-size 2.5rem
    color #fff
    font-weight bold
    height 3rem
    line-height 3rem
    text-align center
    padding-top 3rem
    padding-bottom 1.3rem
    span
      font-weight 400
  .tip
    color #fff
    font-size 1.3rem
    text-align center
  .tip-img
    margin 0 4.2rem
    width calc(100% - 8.4rem)
    margin-top 1.5rem
  .flex-type
    display flex
    .item
      flex 1
      color #fff
      text-align center
      margin 1.8rem 0
      position relative
      &:before
        content ''
        position absolute
        height 3rem
        right 0
        background-color #C7E3C8
        width 1px
        top 1.3rem
      .text
        font-size 2.3rem
        font-weight bold
        margin-bottom .6rem
      .text-tip
        opacity: .7
        font-size 1.2rem
        line-height 1.6rem
  .exam-result
    margin 0 1.5rem
    width calc(100% - 3rem)
  .item-info
    background-color #fff
    margin 1rem 1.5rem 0
    border-radius .6rem
    padding 0 1rem
    padding-bottom .5rem
    .item-title
      color #333
      font-size 1.6rem
      font-weight bold
      line-height 5rem
      height 5rem
      box-sizing border-box
    .cons
      font-size 1.3rem
      color #333
      p
        margin-bottom 1rem
      img
        margin-bottom 1rem
  .exam-fixed
    position fixed
    bottom 0
    width 100%
    background-color #fff
    height 6rem
    padding-left 1.2rem
    box-sizing border-box
    .fixed-title
      font-size 1.7rem
      font-weight bold
      color #333
      margin-top .8rem
      margin-bottom .2rem
    .fixed-tip
      color #999
      font-weight 500
      font-size 1.2rem
      line-height 1.6rem
    .btn
      position absolute
      width 12rem
      height 5rem
      line-height 5rem
      text-align center
      color #fff
      font-size 1.8rem
      background-color #43a047
      right 1.5rem
      top .5rem
      border-radius .4rem
    .pay
      background-color #FE9700
</style>